@import 'jeet/index'
@import '_defaults'
@import '_grid'

bg = #e9e9e9

body
	margin 0
	padding 0
	background bg
	font-family avenir, sans
	p
		font-size 22px
		// text-rendering geometricPrecision
	&.dark
		background #222
		color rgba(white,0.9)
		
.modal
	color #f4816b

.paper
	background-image url('../img/textures/handmadepaper.png')
	box-shadow 0 0 4px 1px rgba(black, 0.2)


wallAngle = 90deg

// temporary
.space-inner-frame
	// -webkit-animation fade-in .2s


@-webkit-keyframes fade-in {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

.bg
	background-size cover
	background-position center center

.texture, .texture.bg
	.bg
		background-size 100% 100%
		background-repeat repeat
		
	
.border, .white-border
	padding 30px 45px

.border
	border 6px solid black
.white-border
	border 6px solid white

.bg-color
	background #e9e9e9

.painting
	display: inline-block
	margin-top 40px
	background white
	padding 5px
	padding-bottom 1px
	// padding-bottom 60px
	border-radius 4px
	// border-bottom 2px solid #eee
	box-shadow 0 0 5px 1px rgba(black,0.2)
	// &:not(first-child)
	// 	margin-left 60px
	img
		// max-height 70vh
		margin 0
		padding 0
		max-width 100%
	

.wall-wrap
	position relative
	width 90vw
	height 50vw

	perspective: 1000px;
	-webkit-perspective: 1000px;
	margin: 4em auto; 
	
	.left-wall, .right-wall
		transition all .4s
		
		.painting img
			max-height 40vh

		// &:hover
		// -webkit-transform rotateY(0)

	.left-wall
		position: absolute
		left 0
		-webkit-transform rotateY(wallAngle)



		
	.right-wall
		position: absolute
		right 0
		-webkit-transform rotateY(-(wallAngle))


		>*
			float right
			


longShadowColor = pink

@-webkit-keyframes textShadowOut {
	from {
		text-shadow: none
	}
	to {
		text-shadow: longShadowColor 1px 1px,
		    longShadowColor 2px 2px,
		    longShadowColor 3px 3px,
		    longShadowColor 4px 4px,
		    longShadowColor 5px 5px,
		    longShadowColor 6px 6px,
		    longShadowColor 7px 7px,
		    longShadowColor 8px 8px,
		    longShadowColor 9px 9px,
		    longShadowColor 10px 10px;
	}
}

.black-frame
	position relative
	width 400px
	height 400px
	border 2px solid rgba(black,0.5)


.flat-shadow
	// -webkit-animation textShadowOut .3s

	text-shadow: longShadowColor 1px 1px,
	    longShadowColor 2px 2px,
	    longShadowColor 3px 3px,
	    longShadowColor 4px 4px,
	    longShadowColor 5px 5px,
	    longShadowColor 6px 6px,
	    longShadowColor 7px 7px,
	    longShadowColor 8px 8px,
	    longShadowColor 9px 9px,
	    longShadowColor 10px 10px;
	height: 150px
	width: 100%
	font-size: 75px
	line-height: 150px
	text-align: center

.portrait-frame
	display inline-block
	width 100px
	height @width
	display inline-block
	// overflow hidden
	background rgba(black,0.05)
	background-size cover
	background-position center center
	border 2px solid white
	box-shadow 0 0 3px 1px rgba(black, 0.2)
	border-radius (@height/2)
	
pre
	tab-size 2
	padding 20px
	border-radius 3px
	border 1px solid rgba(black,0.2)
	background #E6E9F0